<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>vue筛选练习</title>
		<meta name="format-detection" content="telephone=no" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
		<meta name="apple-touch-fullscreen" content="yes" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<link rel="stylesheet" href="../../js/swiper/swiper-3.3.0.min.css" />
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/vue_sort.css" />
		<script src="js/base.js"></script>
	</head>
	<body>
		<div class="wrapper">
			<!-- 帅选 start  -->
			<section class="sortContainer">
				
				<div class="sort_item">
					<div class="sort_item_container">
						<div class="sort_item-border">
							<span class="category_title">类型</span>
							<svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" version="1.1" class="sort_icon">
								<polygon points="0,3 10,3 5,8"></polygon>
							</svg>
						</div>
					</div>
					<section class="category_container sort_detail_type" style="display: none;">
						<section class="category_left"><ul><li class="category_left_li"><section><span>全部类型</span></section> <section><span class="category_count">3261</span> <!----></section></li><li class="category_left_li"><section><img src="https://fuss10.elemecdn.com/b/ff/533cf9617bd57fe1dfb05603bebcfpng.png" class="category_icon"> <span>快餐便当</span></section> <section><span class="category_count">1129</span> <svg width="8" height="8" xmlns="http://www.w3.org/2000/svg" version="1.1" class="category_arrow"><path d="M0 0 L6 4 L0 8" stroke="#666" stroke-width="1.5" fill="none"></path></svg></section></li><li class="category_left_li category_active"><section><img src="https://fuss10.elemecdn.com/6/55/ac1bfd1e818013a9f099e964f1e9djpeg.jpeg" class="category_icon"> <span>特色菜系</span></section> <section><span class="category_count">473</span> <svg width="8" height="8" xmlns="http://www.w3.org/2000/svg" version="1.1" class="category_arrow"><path d="M0 0 L6 4 L0 8" stroke="#666" stroke-width="1.5" fill="none"></path></svg></section></li><li class="category_left_li"><section><img src="https://fuss10.elemecdn.com/1/ba/bf6efbfdb0ef701f19689a5529e5fjpeg.jpeg" class="category_icon"> <span>异国料理</span></section> <section><span class="category_count">351</span> <svg width="8" height="8" xmlns="http://www.w3.org/2000/svg" version="1.1" class="category_arrow"><path d="M0 0 L6 4 L0 8" stroke="#666" stroke-width="1.5" fill="none"></path></svg></section></li><li class="category_left_li"><section><img src="https://fuss10.elemecdn.com/4/35/a7eda7659bac613e524ca7c1ae12epng.png" class="category_icon"> <span>小吃夜宵</span></section> <section><span class="category_count">460</span> <svg width="8" height="8" xmlns="http://www.w3.org/2000/svg" version="1.1" class="category_arrow"><path d="M0 0 L6 4 L0 8" stroke="#666" stroke-width="1.5" fill="none"></path></svg></section></li><li class="category_left_li"><section><img src="https://fuss10.elemecdn.com/4/82/43703799592368585b23589cf3ba8png.png" class="category_icon"> <span>甜品饮品</span></section> <section><span class="category_count">671</span> <svg width="8" height="8" xmlns="http://www.w3.org/2000/svg" version="1.1" class="category_arrow"><path d="M0 0 L6 4 L0 8" stroke="#666" stroke-width="1.5" fill="none"></path></svg></section></li><li class="category_left_li"><section><img src="https://fuss10.elemecdn.com/6/23/5a6fce94bed63a21508f68a72c158png.png" class="category_icon"> <span>果蔬生鲜</span></section> <section><span class="category_count">135</span> <svg width="8" height="8" xmlns="http://www.w3.org/2000/svg" version="1.1" class="category_arrow"><path d="M0 0 L6 4 L0 8" stroke="#666" stroke-width="1.5" fill="none"></path></svg></section></li><li class="category_left_li"><section><img src="https://fuss10.elemecdn.com/0/e0/7558e305abfb2618ae760142222f9png.png" class="category_icon"> <span>鲜花蛋糕</span></section> <section><span class="category_count">492</span> <svg width="8" height="8" xmlns="http://www.w3.org/2000/svg" version="1.1" class="category_arrow"><path d="M0 0 L6 4 L0 8" stroke="#666" stroke-width="1.5" fill="none"></path></svg></section></li><li class="category_left_li"><section><img src="https://fuss10.elemecdn.com/a/c1/5c5dd59b641bdfdeb822362547fb4png.png" class="category_icon"> <span>商店超市</span></section> <section><span class="category_count">107</span> <svg width="8" height="8" xmlns="http://www.w3.org/2000/svg" version="1.1" class="category_arrow"><path d="M0 0 L6 4 L0 8" stroke="#666" stroke-width="1.5" fill="none"></path></svg></section></li></ul></section>
						<section class="category_right"><ul><li class="category_right_li category_right_choosed"><span>全部特色菜系</span> <span>473</span></li><li class="category_right_li"><span>川湘菜</span> <span>142</span></li><li class="category_right_li"><span>其他菜系</span> <span>132</span></li><li class="category_right_li"><span>江浙菜</span> <span>60</span></li><li class="category_right_li"><span>海鲜</span> <span>55</span></li><li class="category_right_li"><span>火锅烤鱼</span> <span>49</span></li><li class="category_right_li"><span>粤菜</span> <span>39</span></li><li class="category_right_li"><span>东北菜</span> <span>19</span></li><li class="category_right_li"><span>西北菜</span> <span>10</span></li><li class="category_right_li"><span>云南菜</span> <span>7</span></li><li class="category_right_li"><span>新疆菜</span> <span>4</span></li><li class="category_right_li"><span>鲁菜</span> <span>0</span></li></ul></section>
					</section>
				</div>
				
				<div class="sort_item">
					<div class="sort_item_container">
						<div class="sort_item-border">
							<span class="category_title">排序</span>
							<svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" version="1.1" class="sort_icon">
								<polygon points="0,3 10,3 5,8"></polygon>
							</svg>
						</div>
					</div>
					<section id="sortPaixu" class="category_container sort_detail_type" style="display: none;">
						<ul class="sort_list_container">
							<li v-for="pxItem in groceryList">
								{{ pxItem.text }}
							</li>
						</ul>
					</section>
				</div>
				
				<div class="sort_item">
					<div class="sort_item_container">
						<div class="sort_item-border">
							<span class="category_title">筛选</span>
							<svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" version="1.1" class="sort_icon">
								<polygon points="0,3 10,3 5,8"></polygon>
							</svg>
						</div>
					</div>
					<section class="sort_detail_type filter_container" style="display: none;"><section data-v-536f189d="" style="width: 100%;"><header data-v-536f189d="" class="filter_header_style">配送方式</header> <ul data-v-536f189d="" class="filter_ul"><li data-v-536f189d="" class="filter_li"><svg data-v-536f189d="" style="opacity: 0;"><use data-v-536f189d="" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fengniao"></use></svg> <span data-v-536f189d="" class="">不限</span></li><li data-v-536f189d="" class="filter_li"><svg data-v-536f189d="" style="opacity: 1;"><use data-v-536f189d="" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fengniao"></use></svg> <span data-v-536f189d="" class="">蜂鸟专送</span></li></ul></section> <section data-v-536f189d="" style="width: 100%;"><header data-v-536f189d="" class="filter_header_style">商家属性（可以多选）</header> <ul data-v-536f189d="" class="filter_ul" style="padding-bottom: 0.5rem;"><li data-v-536f189d="" class="filter_li"><svg data-v-536f189d="" class="activity_svg" style="display: none;"><use data-v-536f189d="" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use></svg> <span data-v-536f189d="" class="filter_icon" style="color: rgb(63, 189, 230); border-color: rgb(63, 189, 230);">品</span> <span data-v-536f189d="" class="">品牌商家</span></li><li data-v-536f189d="" class="filter_li"><svg data-v-536f189d="" class="activity_svg" style="display: none;"><use data-v-536f189d="" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use></svg> <span data-v-536f189d="" class="filter_icon" style="color: rgb(153, 153, 153); border-color: rgb(153, 153, 153);">保</span> <span data-v-536f189d="" class="">外卖保</span></li><li data-v-536f189d="" class="filter_li"><svg data-v-536f189d="" class="activity_svg" style="display: none;"><use data-v-536f189d="" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use></svg> <span data-v-536f189d="" class="filter_icon" style="color: rgb(232, 132, 45); border-color: rgb(232, 132, 45);">新</span> <span data-v-536f189d="" class="">新店</span></li><li data-v-536f189d="" class="filter_li"><svg data-v-536f189d="" class="activity_svg" style="display: none;"><use data-v-536f189d="" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use></svg> <span data-v-536f189d="" class="filter_icon" style="color: rgb(153, 153, 153); border-color: rgb(153, 153, 153);">票</span> <span data-v-536f189d="" class="">开发票</span></li><li data-v-536f189d="" class="filter_li"><svg data-v-536f189d="" class="activity_svg" style="display: none;"><use data-v-536f189d="" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use></svg> <span data-v-536f189d="" class="filter_icon" style="color: rgb(255, 78, 0); border-color: rgb(255, 78, 0);">付</span> <span data-v-536f189d="" class="">在线支付</span></li><li data-v-536f189d="" class="filter_li"><svg data-v-536f189d="" class="activity_svg" style="display: none;"><use data-v-536f189d="" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use></svg> <span data-v-536f189d="" class="filter_icon" style="color: rgb(87, 169, 255); border-color: rgb(87, 169, 255);">准</span> <span data-v-536f189d="" class="">准时达</span></li></ul></section> <footer data-v-536f189d="" class="confirm_filter"><div data-v-536f189d="" class="clear_all filter_button_style">清空</div> <div data-v-536f189d="" class="confirm_select filter_button_style">确定<span data-v-536f189d="" style="display: none;">(0)</span></div></footer></section>
				</div>
			</section>
			<!-- 帅选 end  -->
			
			<!-- 遮罩层 start -->
			<div class="back_cover"></div>
			<!-- 遮罩层 end -->
		</div>
		
		<script src="js/jquery-2.2.0.min.js"></script>
		<script src="js/vue.js"></script>
		<script>
		// 排序
//		Vue.component('todo-item', {
//			props: ['todo'],
//			template: '<li><p data=""><span>{{ todo.text }}</span></p></li>'
//		})
//		
		var sortPaixu = new Vue({
			el: '#sortPaixu',
			data: {
				groceryList: [
					{text: '智能排序'},
					{text: '距离最近'},
					{text: '销量最高'}
				]
			}
		})
		
		$(function(){
			var SORT = {
				sort_item: $(".sort_item")
			}
			SORT.sort_item.on("click",function(){
				var $this = $(this);
				if(!$this.hasClass("choose_type")){
					$this.addClass("choose_type").siblings().removeClass("choose_type").find(".sort_detail_type").hide();
					$this.find(".sort_detail_type").fadeIn();
				}else{
					$this.removeClass("choose_type").find(".sort_detail_type").fadeOut();
				};
			});
		});
		</script>
	</body>
</html>
